<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录注册系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .auth-container {
            max-width: 400px;
            margin: 50px auto;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .form-toggle {
            text-align: center;
            margin-bottom: 20px;
        }
        .form-toggle a {
            cursor: pointer;
            color: #0d6efd;
        }
        .error-message {
            color: #dc3545;
            margin-top: 5px;
            font-size: 0.9em;
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 导航栏样式 */
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            /* 修改为浅色背景 */
            background-color: #f8f9fa;
            /* 修改文字颜色 */
            color: #333;
            padding: 1rem 2rem;
        }

        /* 导航栏左侧 logo 样式 */
        .logo {
            font-size: 1.5rem;
            font-weight: bold;
        }

        /* 导航栏中间链接列表样式 */
        .nav-links {
            display: flex;
            list-style: none;
        }

        /* 导航栏链接样式 */
        .nav-links li {
            margin: 0 1rem;
        }

        .nav-links li a {
            /* 修改链接文字颜色 */
            color: #333;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .nav-links li a:hover {
            /* 修改链接悬停颜色 */
            color: #0d6efd;
        }

        /* 导航栏右侧登录注册按钮样式 */
        .auth-buttons {
            display: flex;
        }

        .auth-buttons button {
            /* 修改按钮背景色 */
            background-color: #0d6efd;
            /* 修改按钮文字颜色 */
            color: white;
            border: none;
            border-radius: 4px;
            padding: 0.5rem 1rem;
            margin-left: 1rem;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .auth-buttons button:hover {
            /* 修改按钮悬停背景色 */
            background-color: #0b5ed7;
        }

    </style>
</head>
<body>
<div id="app">
    <div class="container">
        <nav>
            <!-- 导航栏左侧 logo -->
            <div class="logo">Logo</div>
            <!-- 导航栏中间链接列表 -->
            <ul class="nav-links">
                <li><a href="#">首页</a></li>
                <li><a href="#">产品</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
            <!-- 导航栏右侧登录注册按钮 -->
            <div class="auth-buttons">
                <button>登录</button>
                <button>注册</button>
            </div>
        </nav>
        <div class="auth-container bg-white">
            <h2 class="text-center mb-4">{{ isLoginForm ? '用户登录' : '用户注册' }}</h2>

            <div class="form-toggle">
                {{ isLoginForm ? '没有账号？' : '已有账号？' }}
                <a @click="toggleForm">{{ isLoginForm ? '立即注册' : '立即登录' }}</a>
            </div>

            <div v-if="isLoginForm">
                <form @submit.prevent="handleLogin">
                    <div class="mb-3">
                        <label for="loginUsername" class="form-label">用户名</label>
                        <input type="text" class="form-control" id="loginUsername" v-model="loginForm.username" required>
                    </div>
                    <div class="mb-3">
                        <label for="loginPassword" class="form-label">密码</label>
                        <input type="password" class="form-control" id="loginPassword" v-model="loginForm.password" required>
                    </div>
                    <div v-if="loginError" class="error-message">{{ loginError }}</div>
                    <button type="submit" class="btn btn-primary w-100" :disabled="loading">
                        <span v-if="loading" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                        登录
                    </button>
                </form>
            </div>

            <div v-else>
                <form @submit.prevent="handleRegister">
                    <div class="mb-3">
                        <label for="regUsername" class="form-label">用户名</label>
                        <input type="text" class="form-control" id="regUsername" v-model="registerForm.username" required>
                        <div v-if="usernameError" class="error-message">{{ usernameError }}</div>
                    </div>
                    <div class="mb-3">
                        <label for="regPassword" class="form-label">密码</label>
                        <input type="password" class="form-control" id="regPassword" v-model="registerForm.password" required>
                        <div v-if="passwordError" class="error-message">{{ passwordError }}</div>
                    </div>
                    <div class="mb-3">
                        <label for="regConfirmPassword" class="form-label">确认密码</label>
                        <input type="password" class="form-control" id="regConfirmPassword" v-model="registerForm.confirmPassword" required>
                        <div v-if="confirmPasswordError" class="error-message">{{ confirmPasswordError }}</div>
                    </div>
                    <div v-if="registerError" class="error-message">{{ registerError }}</div>
                    <button type="submit" class="btn btn-primary w-100" :disabled="loading">
                        <span v-if="loading" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                        注册
                    </button>
                </form>
            </div>

            <div v-if="authSuccess" class="alert alert-success mt-3">
                {{ isLoginForm ? '登录成功！' : '注册成功！' }}
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    const v = new Vue({
        el: '#app',
        data: {
            isLoginForm: true,
            loading: false,
            authSuccess: false,
            loginForm: {
                username: '',
                password: ''
            },
            registerForm: {
                username: '',
                password: '',
                confirmPassword: ''
            },
            loginError: '',
            registerError: '',
            usernameError: '',
            passwordError: '',
            confirmPasswordError: ''
        },
    })
</script>
</body>
</html>